<form class="center-align" #searchForm="ngForm" novalidate>
  <mat-input-container class="example-full-width">
    <input matInput [placeholder]="'关键词搜索'|translate" type="text" name="keyWords" [(ngModel)]="param.catName" #keyWordsV="ngModel" required />
  </mat-input-container>
  <button mat-raised-button color="primary" (click)="search()" [disabled]="!searchForm.valid">{{'搜索'|translate}}</button>
</form>
<div class="well white mt10" style="position: relative;">
  <ngx-busy [busy]="busy"></ngx-busy>
  <div class="monitor-search-result-view">
    <table class="bordered highlight">
      <thead>
        <tr>
          <th>{{'类目'|translate}}</th>
          <th>{{'监控'|translate}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let cat of vm.table.table | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'dash_add_table'};let $index = index;">
          <td>
            <span *ngIf="cat.categoryName" [innerHTML]="cat.categoryName|categoryName" [matTooltip]="cat.categoryName"></span>
            <span *ngIf="!cat.categoryName">该类目已失效</span>
          </td>
          <td>
            <monitor-slide-toggel type="category" [data]="cat"></monitor-slide-toggel>
          </td>
        </tr>
        <tr *ngIf="vm.table.table.length ==0">
          <td colspan="5" class="center-align">{{'暂无搜索结果'|translate}}</td>
        </tr>
      </tbody>
    </table>
    <pagination-controls class="center-align pt20" id="dash_add_table" (pageChange)="pageChanged($event)" maxSize="5" directionLinks="true" autoHide="true">
    </pagination-controls>
  </div>
</div>

